<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>投票列表</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script src="js/axios.min.js"></script>
	<script src="js/vue.min.js"></script>
	<script src="js/vote.js"></script>
	<link rel="stylesheet" href="css/ele-index.css">
	<script src="js/ele-index.js"></script>
</head>
<body>
<div id="app">
	<myheader></myheader>
	<div id="vote" class="wrap">
		<h2>投票列表</h2>
		<ul class="list" v-infinite-scroll="query" infinite-scroll-distance="100" style="height: 300px; overflow: auto">
			<li  v-for=" vote,i in votes " :class="{ odd : i%2==0 }">
				<h4>
					<a href="view.html">{{vote.vname}}</a>
<!--					{{vote.vname}}-->
				</h4>
				<div class="join"><a :href="'vote.html?id=' + vote.id">我要参与</a></div>
				<p class="info">共有{{vote.items.length}}个选项，
								已有{{vote.users || 0}}个网友参与了投票。</p>
			</li>
		</ul>
	</div>
	<myfooter></myfooter>
</div>
<script>
	var v = new Vue({
		el : "#app",
		data : {
			votes : [],
			loading : false, // 记录查询状态
			params : {
				page : 1,
				size : 5
			}
		},
		created(){
			// this.query();
		},
		methods:{
			query() {
				// 防止多次查询
				if (this.loading || this.params.page == -1){
					return;
				}
				this.loading = true;
				axios.get("vote/query.s",{
					params: this.params
				}).then(res=>{
					if (res.data.length==0){
						this.params.page = -1;
						// 防止多次查询
						return;
					}
					// 追加数据
					res.data.forEach(v=>{
						this.votes.push(v);
					})
					this.params.page ++;
					this.loading = false;
				})
			}
		}
	})
</script>

</body>
</html>
